<template>
  <div id="search">
    <div class="search-container">
      <div class="search-title">查询</div>
      <div class="form-search">
         <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            
          >
            <el-table-column label="编号" width="50" align="center">
              <template slot-scope="scope">{{
                scope.row.id
              }}</template>
            </el-table-column>
            <el-table-column
              prop="PayWay"
              label="支付方式"
              align="center"
            >
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.starts"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                  @change="nowStatus(scope.$index, scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, tableData)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData: [
        {
          id:1,
          PayWay: "小程序支付",
          starts: 1,
        },
         {
          id:2,
          PayWay: "扫码支付",
          starts: 1,
        },
         {
          id:3,
          PayWay: "线下支付",
          starts: 1,
        },
         {
          id:4,
          PayWay: "现金支付",
          starts: 1,
        },
         {
          id:5,
          PayWay: "积分支付",
          starts: 1,
        },
      ]
    }
  },
  methods:{

    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.$refs);
    },
    nowStatus(index, row){
       console.log(row.starts);
    },
     // 增删改查
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      // console.log(index, row);
      row.splice(index, 1);
    },
  }
}
</script>

<style lang='less' scoped>
.search-container {
  background-color: #fff;
  //   height: 8rem;
  border: 0.1rem solid #dbe0e9;
  .search-title {
    height: 4rem;
    background-color: #f2f2f2;
    box-sizing: border-box;
    border-bottom: 0.1rem solid #dbe0e9;
    line-height: 4rem;
    font-size: 1.4rem;
    padding-left: 3rem;
    font-weight: 500;
    color: #666666;
  }
  .form-search {
    margin: 1rem;
    padding: 1.5rem;
    background-color: #f5f9fc;
    box-sizing: border-box;
  }
}
</style>